<template>
  <div style="display: flex; height: 98%; margin: 15px 20px">
    <div class="left">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>机构列表</span>
          </div>
        </template>
        <div>
          <el-input v-model="filterText" placeholder="请输入机构名称搜索">
            <template #suffix>
              <el-icon class="el-input__icon"><Search /></el-icon>
            </template>
          </el-input>
          <el-tree
            ref="treeRef"
            v-model="value"
            placeholder="请选择机构"
            size="large"
            node-key="xfjyjgTywysbm"
            class="jglbTree"
            :data="treeData"
            :props="props"
            :expand-on-click-node="false"
            :check-strictly="true"
            :filter-node-method="filterNode"
            :default-expanded-keys="['9b19ab64f84a461fb14eef9d8bd9783a']"
            @node-click="nodeClick"
          />
        </div>
      </el-card>
    </div>
    <div class="right">
      <!-- 机构详情 -->
      <el-card class="jgxq-box-card">
        <template #header>
          <div class="card-header">
            <span>机构详情</span>
          </div>
        </template>
        <el-form :inline="true" label-width="72px">
          <el-form-item label="机构名称:" style="width: 45%">
            <el-input v-model="MechanismInfo.jgmc" :disabled="true" />
          </el-form-item>
          <el-form-item label="力量等级:" style="width: 45%">
            <el-input v-model="MechanismInfo.lldj" :disabled="true" />
          </el-form-item>
          <el-form-item label="机构性质:" style="width: 45%">
            <el-input v-model="MechanismInfo.jgxz" :disabled="true" />
          </el-form-item>
          <el-form-item label="机构状态:" style="width: 45%">
            <el-input v-model="MechanismInfo.jgzt" :disabled="true" />
          </el-form-item>
          <el-form-item label="地址:" style="width: 45%">
            <el-input v-model="MechanismInfo.jgdz" :disabled="true" />
          </el-form-item>
          <el-form-item label="值班电话:" style="width: 45%">
            <el-input v-model="MechanismInfo.txzbsDh" :disabled="true" />
          </el-form-item>
        </el-form>
        <!-- <div style="font-weight: 700">请选择左侧树中的机构！</div> -->
      </el-card>

      <div class="right-bottom" style="display: flex">
        <!-- 人员信息 -->
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>人员信息</span>
              <span class="card-header-right" @click="router.push({ path: '/personnelInfo' })">
                管理
                <i></i>
              </span>
            </div>
          </template>
          <!-- <div v-for="(item, index) in MechanismInfo" :key="index" class="personnel-item">
            <div class="personnel-top">{{ item.type }}</div>
            <div
              v-for="(infoItem, infoIndex) in item.personnelList"
              :key="infoIndex"
              class="personnel-info"
            >
              <i></i>
              <div class="info-right" style="">
                <div class="info">
                  <div>
                    <span class="name">{{ infoItem.name }}</span>
                    <span class="job">{{ infoItem.job }}</span>
                  </div>
                  <div>{{ infoItem.number }}</div>
                </div>
                <el-select v-model="value" placeholder="请选择" class="personnel-select">
                </el-select>
              </div>
            </div>
          </div> -->
          <div>暂无数据！</div>
        </el-card>

        <!-- 车辆信息 -->
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>车辆信息</span>
              <span class="card-header-right" @click="router.push({ path: '/vehicleInfo' })">
                管理
                <i></i>
              </span>
            </div>
          </template>
          <!-- <div class="vehicle-top"><span>车辆调序</span><i></i></div> -->
          <div v-for="(item, index) in vehicleData" :key="index" class="vehicle-item">
            <span class="orderNum">{{ index + 1 }}</span>
            <div class="img-license-plate">
              <i></i>
              <span :title="item.jdchphm">{{ item.jdchphm }}</span>
            </div>
            <span :title="item.clmc" class="vehicleName">{{ item.clmc }}</span>
            <!-- <span>{{ item.clztMc }}</span> -->
            <el-select
              v-model="item.clztMc"
              :disabled="true"
              placeholder="请选择"
              class="vehicle-select"
            ></el-select>
          </div>
          <div v-if="!vehicleData.length">暂无数据！</div>
        </el-card>

        <!-- 视频信息 -->
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>视频信息</span>
              <span class="card-header-right" @click="router.push({ path: '/videoInfo' })">
                管理
                <i></i>
              </span>
            </div>
          </template>
          <div v-for="(item, index) in videoData" :key="index" class="video-item">
            <i class="video-icon"></i>
            <span class="video-content" :class="{ 'bf-color': item.state }" :title="item.mc">{{
              item.mc
            }}</span>
            <span v-if="item.zxzt" class="video-state bf greed_color" @click="play(item)">播放</span>
            <span v-else class="video-state lx">离线</span>
          </div>
          <div v-if="!videoData.length">暂无数据！</div>
        </el-card>
      </div>
    </div>
  </div>
   <!-- 视频播放弹窗 -->
  <VideoPopup v-if="userStore.videoPopupShow" :video-info="VideoInfo" />
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElTree } from 'element-plus'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store'
import VideoPopup from './components/videoPopup.vue'

import {
  cgQueryFireControlTree,
  cgJgidQueryJgList,
  cgJgIdQueryClxxList,
  cgJgIdQuerySpjkxxList,
  cgQueryVideoSrc,
} from '@/service'
const userStore = useUserStore()
const router = useRouter()
/** 点击播放事件 */
const VideoInfo = ref({
  src: '', //视频源
  type: 'm3u8', //视频类型
})
const play = (val:any) =>{
  console.log(val)
  cgQueryVideoSrc({ channelID: val.tdId }).then((res: any) => {
    console.log(res.data.url)
    userStore.videoPopupShow = true
    VideoInfo.value.src = res.data.url.httpflv
  })
}


// 机构信息
const MechanismInfo: any = ref({})
const getJgInfoList = (jyjgId: any) => {
  cgJgidQueryJgList({ xfjyjgTywysbm: jyjgId }).then((res: any) => {
    MechanismInfo.value = res
  })
}

// 车辆列表
const vehicleData: any = ref([])
const getClList = (jyjgId: any) => {
  cgJgIdQueryClxxList({ jyjgId }).then((res: any) => {
    vehicleData.value = res
  })
}

// 视频监控列表
const videoData: any = ref([])
const getSpjkList = (jyjgId: any) => {
  cgJgIdQuerySpjkxxList({ jyjgId }).then((res: any) => {
    videoData.value = res
  })
}

const value = ref()

const props = {
  label: 'jgjc',
  children: 'childXfjgTreeInfo',
}
const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

// 触发页面显示配置的筛选
const filterNode = (value, data, node) => {
  // 如果什么都没填就直接返回
  if (!value) {
    return true
  }
  // 如果传入的value和data中的label相同说明是匹配到了
  if (data.jgjc.indexOf(value) !== -1) {
    return true
  }
  // 否则要去判断它是不是选中节点的子节点
  return checkBelongToChooseNode(value, data, node)
}
// 判断传入的节点是不是选中节点的子节点
const checkBelongToChooseNode = (value, data, node) => {
  const level = node.level
  // 如果传入的节点本身就是一级节点就不用校验了if(level ===1) {returnfalse; }
  // 先取当前节点的父节点
  let parentData = node.parent
  // 遍历当前节点的父节点
  let index = 0
  while (index < level - 1) {
    // 如果匹配到直接返回
    if (parentData.data.jgjc.indexOf(value) !== -1) {
      return true
    }
    // 否则的话再往上一层做匹配
    parentData = parentData.parent
    index++
  }
  // 没匹配到返回false
  return false
}

/** 获取树形数据 */
const treeData = ref([])
const getTreeData = () => {
  cgQueryFireControlTree().then((res: any) => {
    treeData.value = res
  })
}
getTreeData()

/** 点击机构树事件 */
const nodeClick = (el: any) => {
  getJgInfoList(el.xfjyjgTywysbm)
  getClList(el.xfjyjgTywysbm)
  getSpjkList(el.xfjyjgTywysbm)
}
</script>

<style lang="scss" scoped>
.left {
  width: 280px;
  margin-right: 10px;
  margin-bottom: 10px;
  .box-card {
    height: 100%;
    font-size: 14px;
    .jglbTree {
      flex: 1;
      max-height: 640px;
      margin-top: 5px;
      overflow: auto;
    }
  }
}
.right {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  .right-bottom {
    flex: 2;
    display: flex;
    margin-top: 10px;
    .box-card {
      margin-right: 10px;
      .card-header {
        display: flex;
        justify-content: space-between;
        .card-header-right {
          cursor: pointer;
          i {
            display: inline-block;
            width: 20px;
            height: 21px;
            background-image: url('@/assets/image/manage-icon.svg');
            background-size: 100% 100%;
            vertical-align: sub;
          }
        }
      }
    }
    .box-card:first-child {
      width: 330px;
    }
    .box-card:nth-child(2) {
      flex: 1;
    }
    .box-card:last-child {
      margin-right: 0;
      width: 270px;
    }

    // 人员信息
    .personnel-item {
      font-size: 14px;
      font-weight: 700;
      color: #646464;
      margin-bottom: 10px;
      .personnel-info {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        i {
          width: 30px;
          height: 30px;
          background-image: url('@/assets/image/tx-icon.svg');
          background-size: 100% 100%;
        }
        .info-right {
          flex: 1;
          display: flex;
          align-items: center;
          padding-left: 8px;
          padding-bottom: 8px;
          border-bottom: 1px solid #ccc;
          .info {
            flex: 1;
            .name {
              display: inline-block;
              width: 65px;
              color: #000;
            }
          }
          .personnel-select {
            width: 35%;
          }
        }
      }
    }

    // 车辆信息
    .vehicle-top {
      display: flex;
      align-items: center;
      width: 90px;
      margin-bottom: 5px;
      font-weight: 700;
      cursor: pointer;
      i {
        width: 16px;
        height: 16px;
        margin-left: 3px;
        background-image: url('@/assets/image/cltx-icon.svg');
        background-size: 100% 100%;
      }
    }
    .vehicle-item {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #d9d9d9;
      // padding-bottom: 3px;
      margin-bottom: 10px;
      font-size: 14px;
      .orderNum {
        width: 10px;
        font-size: 20px;
        font-weight: 700;
        margin-right: 10px;
      }
      .img-license-plate {
        display: flex;
        flex-direction: column;
        margin-right: 10px;
        i {
          width: 78px;
          height: 40px;
          background-image: url('@/assets/image/cl-icon.png');
          background-size: 100% 100%;
        }
        span {
          width: 85px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-weight: 700;
          color: #646464;
        }
      }
      .vehicleName {
        flex: 1;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; // 控制多行的行数
        -webkit-box-orient: vertical;
      }
      .vehicle-select {
        width: 30%;
      }
    }

    // 视频信息
    .video-item {
      display: flex;
      align-items: center;
      height: 40px;
      margin-bottom: 10px;
      span {
        font-size: 14px;
      }
      .video-icon {
        width: 30px;
        height: 30px;
        background-image: url('@/assets/image/video-icon.svg');
        background-size: 100% 100%;
      }
      .video-content {
        flex: 1;
        margin: 0 20px 0 10px;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; // 控制多行的行数
        -webkit-box-orient: vertical;
      }
      .bf-color {
        color: #25b515;
      }
      .video-state {
        width: 50px;
        height: 25px;
        line-height: 25px;
        text-align: center;
      }
      .bf {
        border-radius: 5px;
        color: #fff;
        // background-color: #209dbe;
        background-color: #169bd5;
        cursor: pointer;
      }
      .lx {
        color: #797979;
      }
    }
  }
}
::v-deep .el-card.is-always-shadow {
  border: none;
  border-radius: 15px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}
::v-deep .el-card__header {
  padding: 10px 20px 5px;
  background-color: rgba(32, 157, 190, 1);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

::v-deep .el-card__body {
  padding: 10px;
}

::v-deep .jgxq-box-card {
  flex: 1;
  .el-card__body {
    padding: 20px;
  }
}

::v-deep .el-form-item__label {
  font-weight: 700;
}

::v-deep .right-bottom {
  .el-card__body {
    max-height: 430px;
    overflow: auto;
  }
}

::v-deep .el-input.is-disabled .el-input__inner {
  color: #333;
}
</style>
